// 天地图矢量图层
var layer_vec = new ol.layer.Tile({
  title: "天地图矢量图层",
  source: new ol.source.XYZ({
    url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=50c7278a66fd3a5f393d6d30d25b24df",
    crossOrigin: 'anonymous',
    projection: "EPSG:4326",
    maxZoom: 18,
    minZoom: 1,
    wrapX: false
  })
})
// 天地图矢量注记
var layer_cva = new ol.layer.Tile({
  title: "天地图矢量注记图层",
  source: new ol.source.XYZ({
    url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=50c7278a66fd3a5f393d6d30d25b24df",
    crossOrigin: "anonymous",
    projection: "EPSG:4326",
    maxZoom: 18,
    minZoom: 1,
    wrapX: false
  })
})
// 天地图影像图层
var layer_img = new ol.layer.Tile({
  title: "天地图影像图层",
  source: new ol.source.XYZ({
    url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=50c7278a66fd3a5f393d6d30d25b24df",
    crossOrigin: "anonymous",
    projection: "EPSG:4326",
    maxZoom: 18,
    minZoom: 1,
    wrapX: false
  })
})
// 天地图影像注记
var layer_cia = new ol.layer.Tile({
  title: "天地图影像注记图层",
  source: new ol.source.XYZ({
    url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=50c7278a66fd3a5f393d6d30d25b24df",
    crossOrigin: "anonymous",
    projection: "EPSG:4326",
    maxZoom: 18,
    minZoom: 1,
    wrapX: false
  })
})
// 加载地图文档
var docLayer = new Zondy.Map.Doc('', 'guanggu', {
  ip: 'localhost',
  port: 6163,
  crossOrigin: "anonymous"
})
// 热力图层
var vector = new ol.layer.Heatmap({
  //矢量数据源（读取本地的KML数据）
  source: new ol.source.Vector({
    url: '../../事件.kml',
    format: new ol.format.KML({
      extractStyles: false
    }),
  }),
  //热点半径
  radius: parseInt(20, 10),
  //模糊尺寸
  blur: parseInt(20, 10)
})
vector.getSource().on('addfeature', function (event) {
  // 示例数据2012_Earthquakes_Mag5.kml，可从其地标名称提取地震信息
  //要素的名称属性
  var name = event.feature.get('事件等级');

  //设置要素的weight属性
  event.feature.set('weight', name);
})
// 影像+注记图层组
var imgLayergroup = new ol.layer.Group({
  layers: [
    layer_img,
    layer_cia
  ],
})
// 矢量+注记图层组
var vecLayergroup = new ol.layer.Group({
  layers: [
    layer_vec,
    layer_cva
  ]
})

import { reactive } from "vue"
let map = reactive({})
let l_source = reactive({})

function initMap() {
  // 创建地图
  map = new ol.Map({
    target: 'map',
    layers: [imgLayergroup, vecLayergroup, vector, docLayer],
    view: new ol.View({
      center: [114.395517, 30.484095],
      zoom: 13,
      projection: 'EPSG:4326'
    })
  })

  // 导航控件
  const ZoomToExtent = new ol.control.ZoomToExtent({
    extent: [114.3, 30.484095, 114.45, 30.484095]
  })
  map.addControl(ZoomToExtent)

  // zoomslider 放大缩小控件
  var zoomslider = new ol.control.ZoomSlider()
  map.addControl(zoomslider)

  // 比例尺控件
  var scaleLineControl = new ol.control.ScaleLine({
    units: 'metric'
  })
  map.addControl(scaleLineControl)

  // 鼠标显示坐标值
  var mousePositionControl = new ol.control.MousePosition({
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: 'EPSG:4326',
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position'),
    undefinedHTML: '&nbsp;'
  })
  map.addControl(mousePositionControl)

  // 全屏控件
  var fullScreen = new ol.control.FullScreen();
  map.addControl(fullScreen);

  // 鹰眼控件
  var overviewMapControl = new ol.control.OverviewMap({
    className: 'ol-overviewmap ol-custom-overviewmap',
    layers: [imgLayergroup, vecLayergroup],
    collapseLabel: '\u00BB',
    label: '\u00AB',
    collapsed: false,
    view: new ol.View({
      minZoom: 8,
      maxZoom: 18,
      projection: 'EPSG:4326'
    })
  })
  map.addControl(overviewMapControl)

  // 测量用的空图层
  l_source = new ol.source.Vector()
  var l_vector = new ol.layer.Vector({
    source: l_source,
    style: new ol.style.Style({
      //图层样式
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)' //填充颜色
      }),
      stroke: new ol.style.Stroke({
        color: '#ffcc33', //边框颜色
        width: 2 // 边框宽度
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33'
        })
      })
    })
  })
  map.addLayer(l_vector)

  // 热力图层默认显示，这里将其隐藏
  var layers = map.getLayers().getArray()
  layers[2].setVisible(false)

  return { map, l_source }
}

export { initMap, map, l_source, docLayer }
